<template>
  <div>
    <div class="header" v-for="item of list" :key="item.id">
      <div class="header-back">
        <span class="iconfont">&#xe618;</span>
      </div>
      <div class="header-search">
        <div>
          <span class="iconfont">&#xe647;</span>{{item.cityspot}}
        </div>
      </div>
      <router-link to="/city" tag="div" class="header-city">
        {{item.city}}<span class="iconfont">&#xe6aa;</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default { //  组件配置项
  name: 'HomeHeader',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped="scoped"> //scoped让样式仅在当前你组件起作用
// @符号表示
@import '../../../assets/css/publiccss.styl'
.header
  width 100%
  height 0.88rem
  background $bgcolor
  display flex
  text-align center
  align-items center
  .header-back
    padding 0 0.12rem
    width 0.8rem
    color #FFF
  .header-search
    color #e4e7ea
    flex 1
    div
      background white
      height 0.6rem
      line-height 0.4rem
      padding 0.1rem 0.2rem
      text-align left
      border-radius 0.06rem
  .header-city
    color white
    padding 0 0.22rem
</style>
